﻿
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/iosSelect.css">
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<script src="js/bank.js"></script>
		<script src="js/time.js"></script>
		<script src="js/zepto.js"></script>
		<script src="js/zepto1.js"></script>
		<script src="js/areaData_v2.js"></script>
	    <script src="js/iscroll.js"></script>
	    <script src="js/iosSelect.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>

		<style type="text/css">
			body{padding: 0;margin: 0;}

	
            .color{
                color: #50a738;
            }

		</style>


	</head>
	<body>
	<div style="width: 750px;height: 85px;text-align: center;line-height: 85px;font-size: 18px;position: relative; ">
	<img style="height: 29px;position: absolute;left: 10px;top:27px" src="image/jiantou1.png">
	<img style="height: 38px;position: absolute;right:10px;top:27px;" src="image/yonghu.png">		
	<span style="font-size: 36px;font-family: '黑体';color: #333333">算得准</span>
	</div>
	<div id="myCarousel" class="carousel slide" style="width: 750px;">
	<!-- 轮播（Carousel）指标 -->
	<ol class="carousel-indicators" >
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>   
	<!-- 轮播（Carousel）项目 -->
	<div class="carousel-inner">
		<div class="item active">
			<img src="image/q.png" alt="First slide">
		</div>
		<div class="item">
			<img src="image/q.png" alt="Second slide">
		</div>
		<div class="item">
			<img src="image/q.png" alt="Third slide">
		</div>
	</div>
    </div>
	<!-- 地区选择器 -->
	<div class="form-item item-line" id="select_contact">                    
	    <div class="pc-box" style="position: relative;width: 702px;height: 88px;border-bottom: 1px #b5b5b5 solid;left: 24px">   
	    	<span style="font-size: 32px;font-family: '黑体';z-index: 1;position: absolute;bottom:11px;left: 30px;">出生地</span> <img style="position: absolute;bottom:18px;right:26px;z-index: 1;" src="image/jiantou.png">                       
	        <input class="input" id="show_contact" value="湖北省 武汉市 洪山区" style="width: 500px;height: 42px;text-align: right;font-size: 32px;font-family: '黑体';border: 0;position: absolute;bottom: 14px;left: 130px;">
	    </div>             
	</div>

  

	<!-- 日期选择器 -->
	<div class="form-item item-line" id="selectDate">                          
	    <div class="pc-box" style="position: relative;width: 351px;height: 88px;border-bottom: 1px #b5b5b5 solid;left: 24px" >
	    	<span style="font-size: 32px;font-family: '黑体'z-index: 1;position: absolute;bottom:11px;left: 30px;">出生日期</span>    
	        <input class="input"  data-year="" data-month="" data-date="" id="showDate" style="width: 300px;height: 42px;text-align: right;font-size: 32px;font-family: '黑体';border-top: 0;border-left: 0;border-right: 0;border-bottom:0;position: absolute;bottom: 14px;left: 160px;z-index: 1;" >
	    </div>             
	</div>
	
	<!-- 时辰选择器 -->
	<div class="form-item item-line" id="shichen">                      
	    <div class="pc-box" style="position: relative;width: 351px;height: 88px;bottom: 88px;left: 374px;border-bottom: 1px #b5b5b5 solid;">  
	    	 <img style="position: absolute;bottom:18px;right:24px;z-index: 1;" src="image/jiantou.png">                                                  
	        <input class="input" type="text" id="showTime" style="width: 160px;height: 42px;text-align: right;font-size: 32px;font-family: '黑体';border:0;position: absolute;bottom: 14px;left: 120px;">
	    </div>             
    </div>



	<!-- 性别选择器 -->
	<div class="form-item item-line" id="xingbie" >                      
	    <div class="pc-box" style="position: relative;width: 702px;height: 88px;bottom: 88px;border-bottom: 1px #b5b5b5 solid;left: 24px">
	    	<span style="font-size: 32px;font-family: '黑体';z-index: 1;position: absolute;bottom:11px;left: 30px;">性别</span>   <img style="position: absolute;bottom:18px;right:26px;z-index: 1;" src="image/jiantou.png">          
	        <input class="input" value="男" type="text" id="showBank" style="width: 520px;height:42px;text-align: right;font-size: 32px;font-family: '黑体';border: 0;position: absolute;bottom: 14px;left: 110px;">
	    </div>             
    </div>

					

	

		<button onclick="clickme()" style="background: #50a738;color:white;border-radius: 20px;width: 592px;height: 68px;border: 0px ;position: absolute;top:800px;left: 80px;font-size: 36px;margin-bottom: 100px;">开始免费测</button>


	
</div> 
 <script>
 //跳转
    function clickme(){


      window.location.href='mianfei.html';
            }
 </script>

 <script type="text/javascript">
    $(".pc-box").click(function(){
      $(".pc-box").children('span').removeClass('color')
      $(this).children('span').addClass('color')

    });
 </script>



<script type="text/javascript">
 $(function(){
  function show(){
   var mydate = new Date();
   var str = "" + mydate.getFullYear() + "年";
   str += (mydate.getMonth()+1) + "月";
   str += mydate.getDate() + "日";
   return str;
  }

   $("#showDate").val(show());

  
    var mydate=new Date();
    var hours=mydate.getHours();
    if(hours>=23&&hours<=1){
        $("#showTime").val("子时");
    }
    if(hours>=1&&hours<=3){
        $("#showTime").val("丑时");
    }
    if(hours>=3&&hours<=5){
        $("#showTime").val("寅时");
    }
    if(hours>=5&&hours<=7){
        $("#showTime").val("卯时");
    }
    if(hours>=7&&hours<=9){
        $("#showTime").val("辰时");
    }
    if(hours>=9&&hours<=11){
        $("#showTime").val("巳时");
    }
    if(hours>=11&&hours<=13){
        $("#showTime").val("午时");
    }
    if(hours>=13&&hours<=15){
        $("#showTime").val("未时");
    }
    if(hours>=15&&hours<=17){
        $("#showTime").val("申时");
    }
    if(hours>=17&&hours<=19){
        $("#showTime").val("酉时");
    }
    if(hours>=19&&hours<=21){
        $("#showTime").val("戌时");
    }
    if(hours>=21&&hours<=23){
        $("#showTime").val("亥时");
    }
    console.log(hours)

  



 });
</script>





<script type="text/javascript">
//图片轮播时间
	$('.carousel').carousel({interval:5000});

</script>

<script type="text/javascript">
//日期
    var selectDateDom = $('#selectDate');
    var showDateDom = $('#showDate');
    // 初始化时间
    var now = new Date();
    var nowYear = now.getFullYear();
    var nowMonth = now.getMonth() + 1;
    var nowDate = now.getDate();
    showDateDom.attr('data-year', nowYear);
    showDateDom.attr('data-month', nowMonth);
    showDateDom.attr('data-date', nowDate);
    // 数据初始化
    function formatYear (nowYear) {
        var arr = [];
        for (var i = nowYear - 100; i <= nowYear + 10; i++) {
            arr.push({
                id: i + '',
                value: i 
            });
        }
        return arr;
    }
    function formatMonth () {
        var arr = [];
        for (var i = 1; i <= 12; i++) {
            arr.push({
                id: i + '',
                value: i 
            });
        }
        return arr;
    }
    function formatDate (count) {
        var arr = [];
        for (var i = 1; i <= count; i++) {
            arr.push({
                id: i + '',
                value: i 
            });
        }
        return arr;
    }
    var yearData = function(callback) {
        
            callback(formatYear(nowYear))
       
    }
    var monthData = function (year, callback) {
        
            callback(formatMonth());
       
    };
    var dateData = function (year, month, callback) {
    
            if (/^1|3|5|7|8|10|12$/.test(month)) {
                callback(formatDate(31));
            }
            else if (/^4|6|9|11$/.test(month)) {
                callback(formatDate(30));
            }
            else if (/^2$/.test(month)) {
                if (year % 4 === 0 && year % 100 !==0 || year % 400 === 0) {
                    callback(formatDate(29));
                }
                else {
                    callback(formatDate(28));
                }
            }
            else {
                throw new Error('month is illegal');
            }
       ;
        // ajax请求可以这样写
        /*
        $.ajax({
            type: 'get',
            url: '/example',
            success: function(data) {
                callback(data);
            }
        });
        */
    };
    selectDateDom.bind('click', function () {
        var oneLevelId = showDateDom.attr('data-year');
        var twoLevelId = showDateDom.attr('data-month');
        var threeLevelId = showDateDom.attr('data-date');
        var iosSelect = new IosSelect(3, 
            [yearData, monthData, dateData],
            {
                title: '',
                itemHeight: 35,
                relation: [1, 1],
                oneLevelId: oneLevelId,
                twoLevelId: twoLevelId,
                threeLevelId: threeLevelId,
                showLoading: true,
                callback: function (selectOneObj, selectTwoObj, selectThreeObj) {
                    showDateDom.attr('data-year', selectOneObj.id);
                    showDateDom.attr('data-month', selectTwoObj.id);
                    showDateDom.attr('data-date', selectThreeObj.id);
                    showDateDom.val(selectOneObj.value + '年' + selectTwoObj.value + '月' + selectThreeObj.value+'日');
                }
        });

    });
</script>

<script type="text/javascript">
//地区
    var selectContactDom = $('#select_contact');
    var showContactDom = $('#show_contact');
    selectContactDom.bind('click', function () {
        var sccode = showContactDom.attr('data-city-code');
        var scname = showContactDom.attr('data-city-name');

        var oneLevelId = showContactDom.attr('data-province-code');
        var twoLevelId = showContactDom.attr('data-city-code');
        var threeLevelId = showContactDom.attr('data-district-code');
        var iosSelect = new IosSelect(3, 
            [iosProvinces, iosCitys, iosCountys],
            {
                title: '中国',
                itemHeight: 35,
                relation: [1, 1, 0, 0],
                oneLevelId: oneLevelId,
                twoLevelId: twoLevelId,
                threeLevelId: threeLevelId,
                callback: function (selectOneObj, selectTwoObj, selectThreeObj) {

                    showContactDom.attr('data-province-code', selectOneObj.id);
                    showContactDom.attr('data-city-code', selectTwoObj.id);
                    showContactDom.attr('data-district-code', selectThreeObj.id);
                    showContactDom.val(selectOneObj.value + ' ' + selectTwoObj.value + ' ' + selectThreeObj.value);
                }
        });
    });
</script>

<script type="text/javascript">
//性别
    var showBankDom = document.querySelector('#showBank');
    var xingbie = document.querySelector('#xingbie');


    xingbie.addEventListener('click', function () {
        var bankName = showBankDom.dataset['value'];
        var bankSelect = new IosSelect(1, 
            [data],
            {
                container: '.container',
                title: '',
                relation: [1, 1],
                itemHeight: 35,
                itemShowCount: 3,
                callback: function (selectOneObj) {
                    showBankDom.value = selectOneObj.value;
               
                }
        });
    });
</script>


<script type="text/javascript">
    var showTimeDom = document.querySelector('#showTime');
    var shichen = document.querySelector('#shichen');
    shichen.addEventListener('click', function () {
        var TimeName = showTimeDom.dataset['value'];
        var TimeSelect = new IosSelect(1, 
            [data1],
            {
                container: '.container',
                title: '',
                relation: [1, 1],
                itemHeight: 35,
                itemShowCount: 3,
                callback: function (selectOneObj) {
                    showTimeDom.value = selectOneObj.value;
               
                }
        });
    });
</script>


</html>
